<template>
	<view>
		<view class="wrap" v-if="item">
			<view class="avatar"><image class="pic" :src="I_avatar"></image></view>
			<view class="discuss">
				<view class="name-wrap">
					<text class="name">{{ item.name }}</text>
					<text class="time">{{ item.time | timeFilter }}</text>
					<view class="star">
						<uni-rate :value="item.score || 0" :size="14" :readonly="true" :margin="6"></uni-rate>
					</view>
				</view>
				<view calss="msg-wrap">
					<text class="msg">{{ item.comment | commentFilter }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import util from "@/common/util.js"
	// 学员评价组件
	export default {
		components: {
			uniRate
		},
		props: {
			item: Object
		},
		computed: {
			I_avatar(){
				if(this.item){
					return this.item.avatar || "/static/image/lesson-student_avatar.png"
				}
				return '';
			}
		},
		filters: {
			timeFilter(val){
				return val && util.dateUtils.humanize(+val)
			},
			commentFilter(val){
				// 限制长度
				return val && val.substr(0,40)
			}
		}
	}
</script>

<style scoped>
	.wrap{box-sizing: border-box; padding:30upx 20upx; display:flex; align-items: flex-start;}
	
	.avatar{width:70upx; height:70upx; border-radius:50%; overflow: hidden; background: #CCC; flex-shrink:0;}
	.avatar .pic{width:100%; height:100%;}
	
	.discuss{margin-left:20upx;}
	
	.name-wrap{display:flex;width: 560upx;}
	.name{font-weight: bold; font-size:26upx; color:#666; letter-spacing: 2upx;}
	.time{margin-left:24upx; font-size:24upx; color:#CCC; letter-spacing: 2upx;}
	.msg{font-size:28upx; color:#333;}
	
	.star{ display: flex; justify-content: space-between; align-self: center; align-items: center; position: relative; margin-left: auto; flex:0; margin-top: -4upx;}
</style>
